<template>
  <!-- 周报 -->
  <div>
    <!-- 顶部搜索框    -->
    <div style="display: flex;">

      <div>
        <span style="margin-left: 20px;">搜索用户</span>
        <el-input style="width: 200px;margin-bottom: 10px;margin-left: 10px;" v-model="name">12123</el-input>
      </div>

      <div>
        <span style="margin-left: 20px;">搜索日期</span>
        <el-input style="width: 200px;margin-bottom: 10px;margin-left: 10px" v-model="riqi"></el-input>
      </div>

      <div style="display: flex;justify-content: space-between;width: 50%;">
        <div>
          <el-button type="primary" style="margin-left: 10px">搜索</el-button>
          <el-button type="danger" style="margin-left: 10px">清空</el-button>
        </div>
        <!--     添加功能  -->
        <div>
          <el-button type="primary" @click="dialogVisible=true">
            +添加
          </el-button>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="60%"
            hetght="200px"
          >

            <!--     添加弹出层的功能部分        -->
            <el-form ref="form" :model="form" label-width="200px">
              <el-form-item label="选择日期">
                <el-date-picker  type="date" placeholder="选择日期" v-model="form.date1" style="width: 60%;"></el-date-picker>
              </el-form-item>

              <el-form-item label="姓名">
                <el-input style="width: 60%"></el-input>
              </el-form-item>

              <el-form-item label="所属部门" >
                <el-radio-group v-model="form.section">
                  <el-radio   :label="1">开发部门</el-radio>
                  <el-radio   :label="2">销售部门</el-radio>
                  <el-radio   :label="3">人事部门</el-radio>
                  <el-radio   :label="4">管理部门</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="岗位" style="width: 500px">

                <el-radio-group v-model="form.station" v-show="form.section===1">
                  <el-radio :label="1.1">前端</el-radio>
                  <el-radio :label="1.2">后端</el-radio>
                </el-radio-group>

                <el-radio-group v-model="form.station" v-show="form.section===2">
                  <el-radio :label="2.1"> 销售总监</el-radio>
                  <el-radio :label="2.2">业务员</el-radio>
                  <el-radio :label="2.3">案场销售</el-radio>
                  <el-radio :label="2.4">业务主管</el-radio>
                  <el-radio :label="2.5">接待文秘</el-radio>
                  <el-radio :label="2.6">行政文秘</el-radio>

                </el-radio-group>

                <el-radio-group v-model="form.station" v-show="form.section===3">
                  <el-radio :label="3.1">人事部总监</el-radio>
                  <el-radio :label="3.2">人事部经理</el-radio>
                  <el-radio :label="3.3">人事部主管</el-radio>
                  <el-radio :label="3.4">人事专员</el-radio>
                  <el-radio :label="3.5">薪酬福利专员</el-radio>
                </el-radio-group>

                <el-radio-group v-model="form.station" v-show="form.section===4">
                  <el-radio :label="3.1">生产部</el-radio>
                  <el-radio :label="3.2">采购部</el-radio>
                  <el-radio :label="3.3">品管部</el-radio>
                  <el-radio :label="3.4">企管部</el-radio>
                  <el-radio :label="3.5">财管部</el-radio>
                  <el-radio :label="3.6">人力资源部</el-radio>
                  <el-radio :label="3.7">行政部</el-radio>
                  <el-radio :label="3.8">营销部</el-radio>
                </el-radio-group>



              </el-form-item>


              <el-form-item label="今日完成">
                <el-input v-model="form.teday" style="width: 60%"></el-input>
              </el-form-item>

              <el-form-item label="未完成工作">
                <el-input v-model="form.unfinished" style="width: 60%"></el-input>
              </el-form-item>

              <el-form-item label="需要协调与帮助">
                <el-input v-model="form.help" style="width: 60%" type="textarea"></el-input>
              </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">提交</el-button>
          </span>
          </el-dialog>
        </div>
      </div>



    </div>

    <!--  list 列表渲染  -->
    <div>
      <lista :list="tableData"></lista>
    </div>
    <!--  分页功能  -->
    <div style="display: flex;justify-content: end;margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=1
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="20">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import lista from "./list"
import  put from "./shangchuan"
export default {
  name: "day",
  components:{
    lista,
    put
  },
  data(){
    return{
      tableData: [{
        date: '2016-05-02',
        name: '王中虎',
        address: '上海市普陀区金沙江路 1518 弄',
        department:'开发部门'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        department:'开发部门'

      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        department:'开发部门'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        department:'开发部门'
      },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          department:'开发部门'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          department:'开发部门'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          department:'开发部门'
        },{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          department:'开发部门'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          department:'开发部门'
        }],
      //搜索框的日期与人名
      riqi:"",
      name:"",
      //控制弹出框
      dialogVisible:false,
      //添加的数据
      form:{
        //选择的日期
        date1:"",
        //部门选择
        division:1,
        //  岗位选择
        station:"",
        //今日完成
        teday:"",
        // 未完成工作
        unfinished:"",
        //  需要协调与帮助
        help:""


      },

    }
  },
  methods:{
    //分页点击触发
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);

    },
    //分页点击触发
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },

}
</script>

<style scoped>

</style>
